<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }},{{ n1 }}</h2>
    <button @click=changeName>修改姓名</button>
    <button @click=changeAge>修改年龄</button>
  </div>
</template>

<script lang='ts' setup name="Person">
import { reactive, toRefs, toRef } from 'vue'

let person = reactive({
  name: '张三',
  age: 18
})
//toRefs直接把name与age变成了响应式的
let { name, age } = toRefs(person)

//toRef是单数只能改变类中的一个
let n1 = toRef(person, 'age')

function changeName() {
  name.value += '*'
}

function changeAge() {
  age.value += 1
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>